<template>
	<view v-if="list_all && list_all.length > 0" class="applyEwm">
		<view class="applyEwm-list" v-for="(ite, ind) of list_all" :key="ind">
			<view class="applyEwm-list-top" @click="cli_img(ite, ind)">
				<text class="applyEwm-list-top-txt font_blod">{{ite.partsName}}</text>
				<image v-if="ite.show" class="applyEwm-list-top-img" src="../../../static/manufacturers/top.png"
					mode=""></image>
				<image v-else class="applyEwm-list-top-img" src="../../../static/manufacturers/btm.png" mode=""></image>
			</view>
			<view class="applyEwm-list-main" v-if="ite.show">
				<view class="applyEwm-list-main-li" v-for="(item,index) of ite.listPro" :key="index">
					<view class="applyEwm-li-top">
						<image class="applyEwm-li-top-leftimg" @click="previewImage(item.attributeLogo)" :src=item.attributeLogo mode=""></image>
						<view class="applyEwm-li-top-main">
							<view class="applyEwm-li-top-main-top font_blod">
								{{item.attributeName}}
							</view>
							<view class="applyEwm-li-top-main-two">
								累计申请数：{{item.applyNum}} {{item.partsUnit}}
							</view>
						</view>
						<image @click="cli_go(item, index)" class="applyEwm-li-top-rightimg"
							src="https://www.zzzsyh.com/applets/agent/agent/right_five.png" mode=""></image>
					</view>
					<view class="applyEwm-li-btm">
						<view class="applyEwm-li-btm-left">
							<text class="applyEwm-li-btm-left-txt">本次所需数量：</text>
							<input v-model="item.num" placeholder-class="inputplace" placeholder="请输入需求数量"
								class="applyEwm-li-btm-left-input" type="text" value="" />
						</view>

						<view v-if="item.num" class="applyEwm-li-btm-right" @click="cli_ok(item, index, ind)">
							确认申请
						</view>
						<view v-else class="applyEwm-li-btm-right applyEwm-li-btm-right-false"
							@click="cli_no(item, index)">
							确认申请
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else class="yPopNone" style="margin-top: 40%;">
		<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode=""></image>
		<view class="yPopNoneTxt">
			暂无申请~
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				list_all: []
			}
		},
		mounted() {
			// 获取所有规格
			this.getFactoryPartsList()
		},
		methods: {
			// 图片预览
			previewImage(item, index){
				console.log(item);
				let lis = item.split()
				wx.previewImage({
				  current: 0, // 当前显示图片的http链接
				  urls: lis // 需要预览的图片http链接列表
				})
			},
			// 跳转到历史申请
			cli_go(item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/manufacturers/applyEwmHistory/applyEwmHistory?id=' + id
				})
			},
			// 点击确认申请二维码
			cli_ok(item, index, ind) {
				console.log(item, index);
				uni.showLoading({
					title: '申请中',
					mask: true
				});
				this.applyQrCodeFactoryId(item.id, item.num, index, ind)
			},
			// 没填数量
			cli_no(item, index) {
				console.log(item);
				uni.showToast({
					title: '请先填写申请数量',
					icon: 'none'
				})
			},
			// 申请二维码
			applyQrCodeFactoryId(attributeId, num, index, ind) {
				uni.request({
					url: allapi.applyQrCodeFactoryId,
					data: {
						factoryId: this.factoryId,
						attributeId: attributeId,
						num: num
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading()
						let list = this.list_all
						list[ind].listPro[index].num = ''
						
						if (res && res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 3000
							})
						}
					}
				})
			},
			// 获取所有产品
			getFactoryPartsList() {
				uni.request({
					url: allapi.getFactoryPartsList,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let lists = []
						dat.map(e => {
							lists.push(
								Object.assign(e, {
									show: false,
									listPro: []
								})
							)
						})
						this.list_all = lists

					}
				})
			},
			// 点击产品
			cli_img(item, index) {
				this.getFactoryPartsAttributeList(index, item.id)
			},
			// 获取产品规格
			getFactoryPartsAttributeList(index, partsId) {
				let list = this.list_all
				uni.request({
					url: allapi.getFactoryPartsAttributeList,
					data: {
						factoryId: this.factoryId,
						partsId: partsId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let lists = []
						dat.map(e => {
							lists.push(
								Object.assign(e, {
									num: ''
								})
							)
						})
						list[index].listPro = lists
						list[index].show = !list[index].show
					}
				})
			},
		}
	}
</script>

<style scoped>
	.applyEwm {
		margin: 0 24rpx;
	}

	.applyEwm-list {
		background: #E9EEF1;
		border-radius: 24rpx;
		margin-top: 26rpx;
	}

	.applyEwm-list-top {
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
	}

	.applyEwm-list-top-txt {
		font-size: 32rpx;
		color: #333333;
	}

	.applyEwm-list-top-img {
		width: 38rpx;
		height: 36rpx;
	}

	.applyEwm-list-main-li {
		margin: 0 24rpx;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.applyEwm-list-main-li:last-child {
		border: none;
	}

	.applyEwm-li-top {
		display: flex;
		align-items: center;
	}

	.applyEwm-li-top-leftimg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #CCCCCC;
	}

	.applyEwm-li-top-main {
		flex: 1;
		height: 160rpx;
		margin: 0 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.applyEwm-li-top-main-top {
		font-size: 28rpx;
		color: #333333;
	}

	.applyEwm-li-top-main-two {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	.applyEwm-li-top-rightimg {
		width: 40rpx;
		height: 40rpx;
	}

	.applyEwm-li-btm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 28rpx;
	}

	.applyEwm-li-btm-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.applyEwm-li-btm-left-txt {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.applyEwm-li-btm-left-input {
		width: 172rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
		color: #333333;
		font-size: 28rpx;
	}

	/deep/ .inputplace {
		font-size: 20rpx;
	}

	.applyEwm-li-btm-right {
		font-size: 24rpx;
		color: #FFFFFF;
		font-weight: 400;
		line-height: 34rpx;
		padding: 10rpx 24rpx;
		background: #5DD4D6;
		border-radius: 28rpx;
	}

	.applyEwm-li-btm-right-false {
		opacity: 0.5;
	}
</style>
